<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>Mycat服务监控</h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i>Mycat-监控</a></li>
        <li><a href="#"></i>Mycat服务监控</a></li>
    </ol>
</section>
<!-- Main content -->
<section id="container" class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">监控条件</h3>
                    <div class="box-tools pull-right"></div>
                    <!-- /.box-tools -->
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <div class="row">
                        <div class="col-xs-3">
                            <select onchange="host_detail();" name="hosts" id="hosts" class="form-control">
                            </select>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12" id="hostDetailtable">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-12">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">
                        查询条件<font color="red" size="3">(注：两个条件独立查询)</font>
                    </h3>
                    <div class="box-tools pull-right"></div>
                    <!-- /.box-tools -->
                </div>
                <!-- /.box-header -->
                <div class="box-body no-padding">
                    <form action="" id="query_Form">
                        <div class="row">
                            <div class="col-xs-3">
                                <div class="form-group">
                                    <label for="mycatName">历史查询:</label> <select id="autoperiod"
                                                                                 name="autoperiod" class="form-control"
                                                                                 onchange="historyquery();">
                                    <option value="0" id="period.0">最近1天</option>
                                    <option value="1" id="period.1">最近1小时</option>
                                    <option value="2" id="period.2">最近2小时</option>
                                    <option value="3" id="period.3">最近3小时</option>
                                    <option value="4" id="period.4">最近4小时</option>
                                    <option value="5" id="period.5">最近6小时</option>
                                    <option value="6" id="period.6">最近12小时</option>
                                    <option value="8" id="period.8">最近2天</option>
                                    <option value="9" id="period.9">最近1周</option>
                                    <option value="10" id="period.10">最近2周</option>
                                    <option value="11" id="period.11">最近1个月</option>
                                    <option value="12" id="period.12">最近2个月</option>
                                    <option value="13" id="period.13">最近3个月</option>
                                    <option value="14" id="period.14">最近4个月</option>
                                    <option value="15" id="period.15">最近6个月</option>
                                    <option value="16" id="period.16">最近1年</option>
                                    <option value="17" id="period.17">最近2年</option>
                                </select>
                                </div>
                            </div>
                            <div class="col-xs-8">
                                <div class="form-group">
                                    <label for="mycatName">区间查询:</label>
                                    <div class="input-group">
                                        <div class="input-group-addon">
                                            <i class="fa fa-clock-o"></i>
                                        </div>
                                        <input type="text" class="form-control pull-right"
                                               id="reservationtime">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-md-12">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">图形分析</h3>
                    <div class="box-tools pull-right"></div>
                    <!-- /.box-tools -->
                </div>
                <!-- /.box-header -->
                <div class="box-body no-padding">
                    <img id="contentGraph" src="" height="380" width="100%">
                </div>
            </div>
        </div>
    </div>
</section>


<script type="text/javascript">
    $.AdminLTE.boxWidget.activate();
</script>

<script type="text/javascript">
    var graphTitles = {
        "MycatFluxGraph": "Mycat流量分析",
        "MycatConnectionGraph": "Mycat连接分析",
        /*"MycatActiveThreadGraph" : "Mycat活动线程分析",
        "MycatTaskQueueGraph" : "Mycat缓冲队列分析",*/
        "MycatTPSGraph": "MycatTPS分析",
        "MycatMemoryGraph": "Mycat内存分析"
    }

    var historyquery = function () {
        $('#contentGraph').attr('src',
            getGraphUrl() + "&autoperiod=" + $("#autoperiod").val());
    }

    $(document).ready(
        function () {
            rainbowAjax.get("./reload", "", function callback(data) {
                create_host();
            });
            //Initialize Select2 Elements
            $(".select2").select2();

            //Money Euro
            $("[data-mask]").inputmask();

            //Date range picker with time picker
            $('#reservationtime').daterangepicker(
                {
                    maxDate: moment(), //最大时间
                    showDropdowns: true,
                    showWeekNumbers: false, //是否显示第几周
                    timePicker: true, //是否显示小时和分钟
                    timePickerIncrement: 60, //时间的增量，单位为分钟
                    timePicker12Hour: false, //是否使用12小时制来显示时间
                    ranges: {
                        //'最近1小时': [moment().subtract('hours',1), moment()],
                        '今日': [moment().startOf('day'), moment()],
                        '昨日': [
                            moment().subtract('days', 1).startOf(
                                'day'),
                            moment().subtract('days', 1).endOf(
                                'day')],
                        '最近7日': [moment().subtract('days', 6),
                            moment()],
                        '最近30日': [moment().subtract('days', 29),
                            moment()]
                    },
                    opens: 'right', //日期选择框的弹出位置
                    format: 'YYYY-MM-DD HH:mm', //控件中from和to 显示的日期格式
                    separator: ' to ',
                    locale: {
                        applyLabel: '确定',
                        cancelLabel: '取消',
                        fromLabel: '起始时间',
                        toLabel: '结束时间',
                        customRangeLabel: '自定义',
                        daysOfWeek: ['日', '一', '二', '三', '四', '五',
                            '六'],
                        monthNames: ['一月', '二月', '三月', '四月', '五月',
                            '六月', '七月', '八月', '九月', '十月', '十一月',
                            '十二月'],
                        firstDay: 1
                    }
                });

            $("#reservationtime").on(
                'apply.daterangepicker',
                function () {
                    var daterange = $('#reservationtime').val().split(
                        '~');
                    url = getGraphUrl() + "&begin="
                        + daterange[0].trim() + "&end="
                        + daterange[1].trim();
                    $('#contentGraph').attr('src', url);
                });
        });

    var showgraph = function (url) {
        $('#contentGraph').attr('src', url);
    };

    var getGraphUrl = function () {
        var url = $('#contentGraph').attr('src');
        var index = url.indexOf('&');
        if (index != -1) {
            url = url.substring(0, index);
        }
        return url;
    };

    var host_detail = function () {
        $('#hostDetailtable').html('');
        $('#contentGraph').attr('src', '');
        rainbowAjax
            .get("./graph/showMycatGraphs?hostName=" + $("#hosts").val(), "",
                function callback(data) {
                    var jrdsHtml = '';
                    var jrds = JSON.parse(data);
                    for (var i in jrds) {
                        jrdsHtml += '<table class="table">';
                        jrdsHtml += '<tbody>';
                        jrdsHtml += '<tr>';

                        var probe = jrds[i].probe;
                        for (var j in probe) {
                            var graph = probe[j].graph;
                            for (var k in graph) {
                                var url = graph[k].url;
                                var name = graph[k].name;
                                if (name == "MycatFluxGraph") {
                                    $('#contentGraph').attr('src', url);
                                }
                                if (graphTitles[name]) {
                                    jrdsHtml += '<td><button class="btn btn-block btn-primary" onclick="showgraph(\''
                                        + url
                                        + '\')">'
                                        + graphTitles[name]
                                        + '</button></td>';
                                }
                            }
                        }
                        jrdsHtml += '     </tr>';
                        jrdsHtml += '</tbody>';
                        jrdsHtml += '</table>';
                    }
                    $('#hostDetailtable').html(jrdsHtml);
                });
    }

    var create_host = function () {
        rainbowAjax.get("./graph/hostMycatList?hostprefix=D", "",
            function callback(data) {
                var jrds = JSON.parse(data);
                $('#hosts').html(''); //清空host
                for (var i in jrds) {
                    $("#hosts").append(
                        "<option value=\"" + jrds[i] + "\">" + jrds[i]
                        + "</option>");
                }
                host_detail();
            });
    }

    clearInterval(intervalId);
    intervalId = setInterval(function () {
        var url = $('#contentGraph').attr('src');
        $('#contentGraph').attr('src', url + "&timestamp=" + (new Date()).getTime());
    }, 20000)
</script>
